<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Cache-Control" content="no-transform" /> 
    <meta http-equiv="Cache-Control" content="no-siteapp" />
	<meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
    <meta name="description" content="简书是一个优质的创作社区，在这里，你可以任性地创作，一篇短文、一张照片、一首诗、一幅画……我们相信，每个人都是生活中的艺术家，有着无穷的创造力。">
    <meta name="keywords" content="简书,简书官网,图文编辑软件,简书下载,图文创作,创作软件,原创社区,小说,散文,写作,阅读">
    <title>简书 - 创作你的创作</title>

    <link rel="stylesheet"  href="http://at.alicdn.com/t/font_474922_44h2b65sr0c3ow29.css">
    <link rel="stylesheet"  th:href="@{css/reset.css}">
    <link rel="stylesheet"  th:href="@{css/style.css}">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

<body>

    <!-- 头部 -->
    <div class="header">
        <div class="nav">
            <!-- logo -->
            <a class="logo" href="/index.do">
                <img src="img/likeImg/logo.png" alt="">
            </a>
            
            <ul class="menu">
                <li><a href="" class="index">首页</a></li>
                <li class="download-app"><a href="">下载APP</a></li>
                <!-- 搜索 -->
                <li id="search"><form action="" method="get" accept-charset="utf-8">
                    <input type="text" placeholder="搜索">
                    <a class="search-btn" href=""><i class="iconfont icon-fangdajing"></i></a>
                </form></li>
            </ul>

            <ul class="function">
                <li class="style-mode-btn"><a href="">Aa</a></li>
                <li class="login"><a href="login.html">登录</a></li>
                <li class="sign-in"><a href="sign-in.html">注册</a></li>
                <li class="write-btn"><a href=""><i class="iconfont icon-bi"></i> 写文章</a></li>
            </ul>
            <div class="phone-menu">
                <a href=""><i class="iconfont icon-caidan1"></i></a>
            </div>
        </div>
    </div>
    <!-- 头部END -->


    <!-- 轮播 -->
    <div id="slider">
        <ul id="big-pic">
            <li><a href=""><img src="img/slide (1).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (2).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (3).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (4).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (5).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (6).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (7).jpg" alt=""></a></li>
        </ul>

        <ul id="small-pic" class="small-pic">
            <li><a href=""><img src="img/slide (2).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (3).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (4).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (5).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (6).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (7).jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide (1).jpg" alt=""></a></li>
        </ul>
        
        <a id="prev"><i class="iconfont icon-jiantou-qianjinx1"></i></a>
        <a id="next"><i class="iconfont icon-jiantou-qianjinx"></i></a>
        

    </div>
    <!-- 轮播END -->

    <!-- 主体 -->
    <div class="main">
        <div class="content">
            <!-- 分类栏目 -->
            <div class="all-special" id="showC" >
                <!--//show_catalog(catalog)-->
            </div>

            <!-- 文章列表 -->
            <div class="active-list">
               <!-- // function show_articel(article)-->
            </div>

            <!-- 查看更多 -->
            <a class="more-author" href="#">
                查看更多
                <i class="iconfont icon-jiantou-qianjinx"></i>
            </a>
        </div>

        <!-- 侧边栏 -->
        <div class="sidebar">
            <!-- 热门栏目 -->
            <div class="hot-column">
                <a href="#"><img src="img/likeImg/sevenDay.png" alt=""></a>
                <a href="#"><img src="img/likeImg/thirdDay.png" alt=""></a>
                <a href="#"><img src="img/likeImg/good.png" alt=""></a>
                <a href="#"><img src="img/likeImg/book_like.png" alt=""></a>
                <a href="#"><img src="img/likeImg/likes.png" alt=""></a>
            </div>
            <!-- 扫描下载app -->
            <a class="download">
                <img src="http://cdn2.jianshu.io/assets/web/download-app-qrcode-0257cd2c1d094cba9caa7bdc9e5a1393.png" alt="" class="qrcode">
                <div class="dl-info">
                    <div>下载简书手机App</div>
                    <div>随时随地发现和创作内容</div>
                </div>
            </a>


            <!-- 简书日报 -->
            <div class="daily">
                <div class="title">简书日报
                    <a class="fr" href="">查看往期</a>
                </div>
                <a class="note">
                    <img src="http://upload-images.jianshu.io/upload_images/5596670-266959e83be7a510.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt="">
                    <div class="title">简小妹004—单身是距离成功最近的时候</div>
                </a>
                <a class="note">
                    <img src="http://upload-images.jianshu.io/upload_images/5596670-266959e83be7a510.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt="">
                    <div class="title">简小妹004—单身是距离成功最近的时候</div>
                </a>
            </div>
            
            <!-- 推荐作者 -->
            <div class="recommend">
                <div class="title">推荐作者
                    <a class="fr" href=""><i class="iconfont icon-huan"></i>换一批</a>
                </div>
                <ul class="list-author">
                    <li>
                        <a class="head" href="#"><img src="https://upload.jianshu.io/users/upload_avatars/1835526/9bc600ce-7672-42b8-b03b-1a779593dd45.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt=""></a>
                        <a href="" class="fr follow"><i class="iconfont icon-jia"></i>关注</a>
                        <div class="txt">
                            <a class="name">简书版权</a>
                            <p>写了47k字 · 5.8k喜欢</p>
                        </div>
                    </li>
                    <li>
                        <a class="head" href="#"><img src="https://upload.jianshu.io/users/upload_avatars/13213889/7314c5cc-ca7f-4542-b914-2c8dffaf324d.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt=""></a>
                        <a href="" class="fr follow"><i class="iconfont icon-jia"></i>关注</a>
                        <div class="txt">
                            <a class="name">无限猴子</a>
                            <p>写了81.1k字 · 2.8k喜欢</p>
                        </div>
                    </li>
                    <li>
                        <a class="head" href="#"><img src="https://upload.jianshu.io/users/upload_avatars/10849033/a3e12f47-c81c-4659-9c80-117f8b337408.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt=""></a>
                        <a href="" class="fr follow"><i class="iconfont icon-jia"></i>关注</a>
                        <div class="txt">
                            <a class="name">lostdays </a>
                            <p>写了89k.5字 · 9.8k喜欢</p>
                        </div>
                    </li>
                    <li>
                        <a class="head" href="#"><img src="http://upload.jianshu.io/users/upload_avatars/1996705/738ba2908445?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt=""></a>
                        <a href="" class="fr follow"><i class="iconfont icon-jia"></i>关注</a>
                        <div class="txt">
                            <a class="name">白发老蘭</a>
                            <p>写了51.1k字 · 5.8k喜欢</p>
                        </div>
                    </li>
                    <li>
                        <a class="head" href="#"><img src="https://upload.jianshu.io/users/upload_avatars/12665193/828a449f-efbb-4540-b0af-f6c314810515.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt=""></a>
                        <a href="" class="fr follow"><i class="iconfont icon-jia"></i>关注</a>
                        <div class="txt">
                            <a class="name">宇文歡</a>
                            <p>写了99.1k字 · 15.8喜欢</p>
                        </div>
                    </li>
                </ul>
                <!-- 查看更多 -->
                <a class="more-author" href="#">
                    查看全部
                    <i class="iconfont icon-jiantou-qianjinx"></i>
                </a>
            </div>
        </div>
    </div>
    <!-- 主体END -->

    <!-- 页脚 -->
    <div class="footer">
        <a href="">关于简书</a> ·
        <a href="">联系我们</a> ·
        <a href="">加入我们</a> ·
        <a href="">简书出版</a> ·
        <a href="">品牌与徽标</a> ·
        <a href="">帮助中心</a> ·
        <a href="">合作伙伴</a>

        <!-- 备案信息 -->
        <div class="icp">
            <span>©2012-2017 上海佰集信息科技有限公司 / 简书 / 沪ICP备11018329号-5 /<a href="">沪公网安备31010402002252号 / </a></span>
            <!-- 实名验证 -->
            <a href=""><img src="http://cdn2.jianshu.io/assets/web/smrz-557fa318122c99a66523209bf9753a27.png" alt=""></a><br>
            <a href="">沪公网安备31010402002252号 / </a>
            <!-- 举报电话 -->
            <a href=""><img src="http://cdn2.jianshu.io/assets/web/wxb-a216456895eb66c17497dbd3da443cf8.png" alt=""></a>
            举报电话：021-34770013 / 
            <a href=""><img src="http://cdn2.jianshu.io/assets/web/zggsrz-5695587dccf490ca3e651f4228f7479e.png" alt=""></a>
        </div>
    </div>
    <!-- 页脚END -->

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script th:src="@{js/index.js}"></script>
    <script text="text/javascript">
        // <a href="" class="special"><img src="" alt=""><span class="name"></span></a>
        // <a href="" class="more-special">更多热门专题></a>
        $(function () {
            show_catalog();
            show_articel();
        });

        function show_catalog(catalog){
            $.ajax({
                url:"show_catalog.do",
                type:"Get",
                success:function (result) {
                    var  emp=result;
                    $.each(emp,function (index,item) {
                        var buto=$("<a></a>").addClass("special")
                            .append($("<img>").attr("src",item.catalogImg))
                            .append($("<span></span>").addClass("name").append(item.catalogname)).appendTo("#showC");
                    });
                    $("<a></a>").addClass("more-special").attr("href","#").append("更多热门专题>").appendTo("#showC");
                }
            })
        };

        function show_articel(article) {
            $.ajax({
                url:"show_articel.do",
                type:"Get",
                success:function (result) {
                    var emp=result;
                    $.each(emp,function (index,item) {
                      var authorimg=$("<a></a>").attr("href","#").append($("<img>").attr("src",item.urlImg));
                      var name=$("<a></a>").addClass("name").attr("href","#").append("韩大爷的杂货铺");
                      var time=$("<span></span>").addClass("time").append(item.articletime);
                      var authotdiv=$("<div></div>").addClass("author").append(authorimg).append(name).append(time);

                      var title=$("<a></a>").addClass("title").attr("href","#").append($("<h3></h3>").append(item.articlename));
                      var content=$("<p></p>").addClass("summary").append(item.content);
                      var articelurl=$("<a></a>").addClass("pic").attr("href","#").append($("<img>").attr("src",item.articleurl));

                      var articlediv=$("<div></div>").addClass("active-content").append(title).append(content).append(articelurl);

                      var catalogname=$("<a></a>").addClass("active-tag").attr("href","#").append(item.catalogname);
                      var icon=$("<a></a>").addClass("active-comment").attr("href","#").append($("<i></i>").addClass("iconfont icon-pinglun").append(item.replynum));
                      var like=$("<a></a>").addClass("active-like").attr("href","#").append($("<i></i>").addClass("iconfont icon-aixin").append(item.likenum));
                      var articelrel=$("<div></div>").addClass("meta").append(catalogname).append(icon).append(like);

                      $("<div></div>").addClass("active").append(authotdiv).append(articlediv).append(articelrel).appendTo(".active-list");
                    })
                }
            })
        }
    </script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>